{% extends "base.html" %}
{% block mainbody %}

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <meta charset="utf-8"/>
        <script src="/static/js/echarts.min.js"></script>
    </head>
    <title>实体</title>
    <div class="container">
        <div class="row">
            <!--head start-->
            <div class="col-md-12">
                <h3 class="page-header"><i class="fa fa-share-alt" aria-hidden="true"></i> 实体查询 </h3>
                <ol class="breadcrumb">
                    <li><i class="fa fa-home"></i><a href="\">Home</a></li>
                    <li><i class="fa fa-share-alt" aria-hidden="true"></i>实体查询</li>
                </ol>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default ">
                    <header class="panel-heading">
                        查询条件：
                    </header>
                    <div class="panel-body">
                        <!--搜索框-->
                        <form method="get" id='searchEntityForm'>
                            <div>
                                <div class="input-group">
                                    <input type="text" id="user_text" name="entity" class="form-control"
                                           placeholder="输入实体名称" aria-describedby="basic-addon1">
                                    <span class="btn btn-primary input-group-addon" type="button"
                                          id="relationSearchButton" style="background-color:#4592fe ; padding:6px 38px"
                                          onclick="document.getElementById('searchEntityForm').submit();">查询</span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


            </div>
            <p>
                <div class="col-md-12">
                    {% ifequal isexist False %}
                        <div class="panel panel-default">
                            <header class="panel-heading">
                                <div class="panel-body">
                                    <h2>数据库中暂未添加该实体</h2>
                                </div>
                            </header>
                        </div>
                    {% endifequal %}
                </div>
            </p>

        {% if isexist %}
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div class="col-md-12">
                <div class="panel panel-default ">
                    <header class="panel-heading">
                        关系图 :
                    </header>
                    <div class="panel-body ">
                        <div id="graph" style="width: 90%;height:600px;"></div>
                    </div>
                </div>
            </div>
        {% endif %}

            {% if isexist %}
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <header class="panel-heading">
                            关系列表 :
                        </header>
                        <div class="panel-body">
                            <table class="table" data-paging="true" data-sorting="true">
                                <tr>
                                    <th>实体一</th>
                                    <th>关系</th>
                                    <th>实体二</th>
                                </tr>
                                {% for r in result.relation %}
                                    <tr>
                                        <td>{{ r.source }}</td>
                                        <td>{{ r.name }}</td>
                                        <td>{{ r.target }}</td>
                                    </tr>
                                {% endfor %}
                            </table>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    {% if isexist %}
        <script>
            var myChart = echarts.init(document.getElementById('graph'));
            option = {
                title: {text: '医疗实体关系图谱'},
                tooltip: {
                    formatter: function (x) {
                        return x.data.des;
                    }
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        symbolSize: 50,
                        roam: true,
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 10
                                }
                            }
                        },
                        force: {
                            repulsion: 1500,
                            edgeLength: [20, 50]
                        },
                        draggable: true,
                        itemStyle: {
                            normal: {
                                color: '#4b565b'
                            }
                        },
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: '#000000'

                            }
                        },
                        edgeLabel: {
                            normal: {
                                show: true,
                                formatter: function (x) {
                                    return x.data.name;
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                textStyle: {}
                            }
                        },
                        data: {{ result.entity|safe }},
                        links: {{ result.relation|safe }}
                    }
                ]
            };
            myChart.setOption(option);
        </script>
    {% endif %}
{% endblock %}
